<template>
	<view>
		<view class="userinfo-box u-flex">
			<u-avatar :src="userInfo.headiImgurl" size="104" class="u-m-r-24"></u-avatar>
			<view class="top-info">
				<view class="u-font-40 u-m-b-8 name-box">{{ userInfo.name }}</view>
				<view @click="pickerShow = true">
					<text class="u-m-r-16">{{ userInfo.userOrgs[0].companyName }}</text>
					<text>{{ userInfo.userOrgs[oIndex].orgName }}</text>
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
				<u-picker mode="selector" v-model="pickerShow" :range="userInfo.userOrgs" range-key="orgName" @confirm="checkOrgName"></u-picker>
			</view>
			<image src="../../static/images/qr_icon.png" mode="" class="qr" @click="qrCode"></image>
		</view>
		<view class="menu-box">
			<!-- 考试类型 examType: 1模拟 2正式 -->
			<view class="menu-item">
				<navigator url="../practice/practice?title=试题练习&examType=1" hover-class="none">
					<image src="../../static/images/home_btn_lianxi.png" mode=""></image>
					<text>试题练习</text>
				</navigator>
			</view>
			<view class="menu-item">
				<navigator url="../practice/practice?title=测评考试&examType=2" hover-class="none">
					<image src="../../static/images/home_btn_kaoshi.png" mode=""></image>
					<text>测评考试</text>
				</navigator>
			</view>
			<view class="menu-item">
				<navigator url="../wrongQuestions/wrongQuestions" hover-class="none">
					<image src="../../static/images/home_btn_cuoti.png" mode=""></image>
					<text>错题集</text>
				</navigator>
			</view>
			<view class="menu-item">
				<navigator url="../historicalAchievements/historicalAchievements" hover-class="none">
					<image src="../../static/images/home_btn_chengji.png" mode=""></image>
					<text>历史成绩</text>
				</navigator>
			</view>
			<view class="menu-item">
				<navigator url="../trainingTasks/trainingTasks?title=培训任务" hover-class="none">
					<image src="../../static/images/home_btn_peixun.png" mode=""></image>
					<text>培训任务</text>
				</navigator>
			</view>
			<view class="menu-item">
				<navigator url="../examPlan/examPlan" hover-class="none">
					<image src="../../static/images/home_btn_jihua.png" mode=""></image>
					<text>训考计划</text>
				</navigator>
			</view>
			<view class="menu-item">
				<navigator url="../learningMaterials/learningMaterials" hover-class="none">
					<image src="../../static/images/home_btn_ziliao.png" mode=""></image>
					<text>学习资料</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			pickerShow: false,
			oIndex: null,
			userInfo: {}
		};
	},
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo')
	},
	onShow() {
		this.oIndex = this.userInfo.userOrgs.findIndex(v => v.orgId == uni.getStorageSync('department').orgId)
	},
	methods: {
		qrCode() {
			uni.navigateTo({
				url: '../qrCode/qrCode'
			})
		},
		// 选择部门
		checkOrgName(e) {
			this.oIndex = e[0]
			uni.setStorageSync('department', this.userInfo.userOrgs[e[0]])
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	padding: 24upx;
	.userinfo-box {
		background-color: #ffffff;
		border-radius: 24upx;
		margin-bottom: 24upx;
		padding: 80upx 32upx;

		.top-info {
			font-size: 24upx;
			color: #828282;
			.name-box {
				font-weight: 500;
				color: #2b2b2b;
			}
			text {
				display: inline-block;
			}
		}
		.qr {
			width: 32upx;
			height: 32upx;
			margin-left: auto;
		}
	}
	.menu-box {
		background: #ffffff;
		border-radius: 24upx;
		display: flex;
		flex-wrap: wrap;
		.menu-item {
			width: calc(100% / 3);
			text-align: center;
			padding: 56upx 0;
			border-right: 2upx solid #F6F6F6;
			border-bottom: 2upx solid #F6F6F6;
			image {
				width: 64upx;
				height: 64upx;
				margin-bottom: 24upx;
			}
			text {
				font-size: 24upx;
				color: #3b3b3b;
				display: block;
			}
			
		}
	}
}
</style>
